<template>
    <div id="wrap">
      <!--头部-->
      <div class="top">
        <img @click="goback()" src="../../../static/bmqd/BMQD-1.png" alt="">
        <span>{{title}}</span>
        <img src="../../../static/bmqd/fenxiang.png" alt="">
      </div>


      <div class="top-img">
        <img src="../../../static/tuijian/tj-4.png" alt="">
      </div>
      <div class="text">
        <p>Rose Hydrosed是一款来自澳大利亚的护肤产品，主 要功能为深层滋润肌肤，锁住水分，打造玫瑰般娇嫩肌 肤...</p>
        <p>下面为您推荐一些产品</p>
      </div>

      <div v-for="(info,index) in arr">
        <div class="con-top" >
          <div class="con-top-h">
            <img src="../../../static/tuijian/tj-1.png" />
            <div class="con-top-h-r">
              <p><span>{{info.title1}}</span><span>{{info.title2}}</span></p>
              <span></span><span></span><span></span>
            </div>
          </div>
          <div class="con-top-f">
            <div class="con-top-f-l">
              <img :src="info.src" />
            </div>
            <div class="con-top-f-r">
              <h3>{{info.title3}}</h3>
              <p>{{info.title4}}</p>
              <button class="btn">立即购买</button>
            </div>
          </div>
        </div>

        <div class="con-wrap" v-if="index==0">
          <p :class="{'pp':active==index}"  v-for="(l,index) in list" @click="change(index)">{{l.t}}</p>
        </div>

        <div class="lists" v-for="i in info.tits">
          <!--标题-->
          <div class="list-tit">
            <span class="span"></span>
            <p>{{i.tit}}</p>
            <span class="span"></span>
          </div>

          <!--商品描述-->
          <div class="goods-info">
            <div class="goods-list" v-for="item in i.info">
              <div class="info-top">
                <img :src="item.url1" alt="">
              </div>
              <div class="info-bot">
                <h3>{{item.text}}</h3>
                <span>{{item.price}}</span>
                <button class="btn1" @click="buy()">立即购买</button>
              </div>
            </div>
          </div>
        </div>


      </div>











      </div>
</template>

<script>
    export default {
        name: "Lunboinfo",
      data(){
          return{
            title:'打造玫瑰般娇嫩肌肤',
            active:0,
            list:[
              {t:'防晒'},
              {t:'爽肤水x精华'},
              {t:'乳液x面霜'},
            ],
            arr:[
              {title1:'防晒类',title2:'第1位',src:require('../../../static/tuijian/huazhuangpin.png'),title3:'美肤宝',title4:'守护肌肤预防紫外线所引发的斑点以及胶原蛋 白变形等，是具有抗老保养效果的全效防晒霜',
                tits:[
                  {tit:'往期上榜',url:require('../../../static/xlyz/xing.png'),
                    info:[
                      {url1:require('../../../static/xlyz/jml.png'),text:'蜗牛饰容BB霜50g',price:'¥12.90'},
                      {url1:require('../../../static/xlyz/jml.png'),text:'蜗牛饰容BB霜50g',price:'¥12.90'},
                      {url1:require('../../../static/xlyz/jml.png'),text:'蜗牛饰容BB霜50g',price:'¥12.90'},
                      {url1:require('../../../static/xlyz/jml.png'),text:'蜗牛饰容BB霜50g',price:'¥12.90'}
                    ]
                  },

                ]
              },
              {title1:'精华类',title2:'第2位',src:require('../../../static/tuijian/huazhuangpin.png'),title3:'美肤宝',title4:'守护肌肤预防紫外线所引发的斑点以及胶原蛋 白变形等，是具有抗老保养效果的全效防晒霜',
                tits:[
                  {tit:'往期上榜',url:require('../../../static/xlyz/xing.png'),
                    info:[
                      {url1:require('../../../static/xlyz/jml.png'),text:'蜗牛饰容BB霜50g',price:'¥12.90'},
                      {url1:require('../../../static/xlyz/jml.png'),text:'蜗牛饰容BB霜50g',price:'¥12.90'},
                      {url1:require('../../../static/xlyz/jml.png'),text:'蜗牛饰容BB霜50g',price:'¥12.90'},
                      {url1:require('../../../static/xlyz/jml.png'),text:'蜗牛饰容BB霜50g',price:'¥12.90'}
                    ]
                  },

                ]
              }
            ],

          }
      },
      components:{

      }
      ,methods:{
        goback(){
          window.history.go(-1);
        },
        change(i){
          this.active=i;
        },
        buy(){

        },
      }
    }
</script>

<style scoped>
  #wrap{
    background: #feeaf5;
  }
  .top{
    width: 69rem;
    height: 3rem;
    line-height: 3rem;
    padding: 3.5rem 1.5rem;
    background: #e53e42;
    display: flex;
    justify-content: space-between;
  }
  .top span{
    font-size: 3.6rem;
    color: #fff;
  }
  .top img{
    width: 3rem;
    height: 3rem;
  }


  .top-img{
    width: 72rem;
    height: 30rem;
    margin-bottom: 1rem;
  }
  .top-img img{
    width: 100%;
    height: 100%;
    vertical-align: middle;
  }

  .text{
    width: 68rem;
    padding: 1.5rem 2rem;
    background: #fff;
    margin-bottom: 2rem;
  }
  .text p{
    font-size: 2.8rem;
    color: #4d4d4d;
  }

  .con-top{
    width: 68rem;
    height: 31rem;
    padding: 0 2rem;
    background: #fff;
    margin-bottom: 2rem;
  }
  .con-top-h{
    width: 62rem;
    height: 10rem;
    padding-right:6rem;
    display: flex;
    justify-content: space-around;
  }
  .con-top-h img{
    width: 8rem;
    height: 9rem;
  }
  .con-top-h p span{
    display: inline-block;
    color: #c46c25;
    font-size: 30px;
  }
  .con-top-h-r{
    padding-top: 1rem;
  }
  .con-top-h-r p{
    margin-bottom: 1rem;
  }
  .con-top-h-r p span:first-child{
    margin-right: 2rem;
  }
  .con-top-h-r>span{
    display: block;
    width: 50rem;
    height: .1rem;
    background: #c46c25;
    margin-bottom: .7rem;
  }

  .con-top-f{
    width: 68rem;
    height: 18rem;
    padding-bottom: 2rem;
    display: flex;
    justify-content: space-between;
  }
  .con-top-f-l{
    width: 16rem;
    height: 18rem;
  }
  .con-top-f-l img{
    width: 100%;
    height: 100%;
  }
  .con-top-f-r{
    width: 50rem;
    height: 18rem;
  }
  .con-top-f-r h3{
    font-size: 34px;
    color: #4d4d4d;
  }
  .con-top-f-r p{
    font-size: 30px;
    color: #808080;
    margin: 2rem 0 3.8rem 0;
  }
  .btn{
    width: 12rem;
    height: 3rem;
    font-size: 20px;
    color: #fff;
    background: #e53e42;
  }




  .con-wrap{
    display: flex;
    justify-content: space-between;
    padding: 0 3rem;
    background: #fff;
    border-bottom:.1rem solid #ccc;
  }
  .con-wrap p{
    position: relative;
    display: inline-block;
    width: 20rem;
    height: 6rem;
    line-height: 6rem;
    color: #4d4d4d;
    font-size: 3rem;
    text-align: center;


  }
  .con-wrap p:after{
    position: absolute;
    left: -2rem;
    top:1.5rem;
    content: '';
    height: 3rem;
    width: .2rem;
    background: #808080;
  }
  .con-wrap p:first-child:after{
    display: none;
  }
  .con-wrap .pp{
    color: #e53e42;
    border-bottom: .2rem solid #e53e42;
  }

  .lists{
    width: 72rem;
  }
  .list-tit{
    display: flex;
    justify-content: center;
    height: 6rem;
    line-height: 6rem;
    background: #e8b2d0;
    margin: 1rem 0;

    /*padding-bottom: 2.5rem;*/
  }
  .list-tit img{
    width: 26rem;
    height: 3rem;
  }
  .list-tit p{
    margin: 0 1.5rem;
    font-size: 3rem;
    color: #4d4d4d;
  }
  .list-tit .span{
    display: inline-block;
    width: 6rem;
    height: 0.1rem;
    background: #cccccc;
    margin-top: 3rem;
  }


  .goods-info{
    width: 68rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 2rem;
  }
  .goods-list{
    width: 33rem;
    height: 44rem;
    border: 1px solid #cccccc;
    background: #fff;
    margin-bottom: 2rem;
  }
  .info-top{
    width: 7rem;
    height: 16rem;
    padding:5rem 13rem;
    border-bottom: 1px solid #cccccc;
  }
  .info-top img{
    width: 7rem;
    height: 16rem;
  }
  .info-bot{
    padding: 1rem 2rem 1rem;
    text-align: center;
  }
  .info-bot h3{
    font-size: 2.2rem;
    color: #4d4d4d;
    margin-top: 1rem;
  }
  .info-bot span{
    display: block;
    color: #e53e42;
    font-size: 2.4rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
  }
  .info-bot .btn1 {
    width: 22rem;
    height: 3.5rem;
    border-radius: 1.5rem;
    background:#e53e42;
    color: #fff;
    font-size: 2.4rem;
  }

</style>
